<template>
	<view class="container">
		<view class="banner">
			<image :src="bannerUrl" mode="" class="banner"></image>
		</view>
		<view class="content">
			<scroll-view :scroll-y="true" :style="{height: contentHeight + 'px'}" class="slidebar">
				<view 
					class="slidebar_item" 
					:class="curTab == index ? 'active_item' : ''" 
					@click="tabClick(index)"
					v-for="(item,index) in list" 
					:key="index">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			<scroll-view 
				:scroll-y="true"
				:style="{height: contentHeight + 'px'}" 
				class="right_content"
				@scrolltolower="scrolltolower"
			>
				<view class="list_content" v-if="curTab == 0">
					<view class="item" @click="pageTo(item.id)" v-for="(item, index) in zytlList" :key="index">
						<image :src="item.imageUrl" mode=""></image>
						<view class="item_txt">
							<text>{{ item.title }}</text>
							<text class="des">{{ item.description }}</text>
						</view>
					</view>
				</view>
				<view class="list_content" v-if="curTab == 1">
					<view class="items" @click="ssysDetail(item.id)" v-for="(item, index) in ssysList" :key="index">
						<image :src="item.imageUrl" mode=""></image>
						<text class="title">{{ item.title }}</text>
						<view class="content">{{ item.description }}</view>
					</view>
				</view>
				<view class="list_content" v-if="curTab == 2">
					<view class="item" @click="navigateTo(item.id)" v-for="(item, index) in baseList" :key="index">
						<image :src="item.imageUrl" mode=""></image>
						<view class="item_txt">
							<text>{{ item.title }}</text>
							<text class="des">{{ item.description }}</text>
							<!-- <view class="nums">
								<u-icon name="photo"></u-icon>
								<text>{{ item.imagesUrl.length }}张</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="list_content" v-if="curTab == 3">
					<view class="item" @click="product(item.id)" v-for="(item, index) in productList" :key="index">
						<image :src="item.imageUrl" mode=""></image>
						<view class="item_txt">
							<text>{{ item.title }}</text>
							<text class="des">{{ item.description }}</text>
						</view>
					</view>
				</view>
				<view class="nomore">
					<u-loadmore :status="Status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { 
		medicineList, 
		RecommendBanner,
		dietList,
		baseList,
		productList
	} from '../../api/api'
	export default {
		data() {
			return {
				list: [{
					name: '中医调理'
				}, {
					name: '膳食养生'
				}, {
					name: '康养基地'
				}, {
					name: '产品介绍'
				}],
				curTab: '0',
				contentHeight: 0,
				bannerUrl: '',
				zytlList: [],
				ssysList: [],
				baseList: [],
				productList: [],
				Status: 'loading',
				pageIndex: 1
			};
		},
		watch: {
			curTab(val) {
				this.pageIndex = 1;
				this.Status = 'loading';
				switch(val) {
					case '0': 
						this.zytlList = [];
						this.getZytlList();
						break;
					case '1': 
						this.ssysList = [];
						this.getSsysList();
						break;
					case '2':
						this.baseList = [];
						this.getBaseList();
						break;
					case '3':
						this.productList = [];
						this.getProductList();
						break;
				}
			}
		},
		onLoad(options) {
			if(options.cur) this.curTab = options.cur
			this.getBanner()
			this.getZytlList()
		},
		onReady() {
			this.$u.getRect('.banner').then(result => {
				uni.getSystemInfo({
					success: (res) => {
						this.contentHeight = res.windowHeight - result.height - 10
					}
				})
			})
		},
		methods: {
			// 获取banner
			getBanner () {
				RecommendBanner({ id: 17 }).then(res => {
					if(res.code == 1) {
						this.bannerUrl = res.data[0].imageUrl
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 获取中医调理列表
			getZytlList () {
				if(this.Status == 'nomore') return;
				medicineList({page: this.pageIndex, limit: 10}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.zytlList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 获取膳食养生列表
			getSsysList() {
				if(this.Status == 'nomore') return;
				dietList({ page: this.pageIndex, limit: 10 }).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.ssysList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 基地列表
			getBaseList () {
				if(this.Status == 'nomore') return;
				baseList({page: this.pageIndex, limit: 10}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.baseList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 产品介绍列表
			getProductList() {
				if(this.Status == 'nomore') return;
				productList({ page: this.pageIndex, limit: 10 }).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if(res.data.length == 0) {
							this.Status = 'nomore'
							return
						}
						if(res.data.length < 10) {
							this.Status = 'nomore'
						}
						this.productList.push(...res.data)
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 列表滚动触底
			scrolltolower() {
				this.pageIndex++;
				switch(this.curTab) {
					case '0': 
						this.getZytlList();
						break;
					case '1': 
						this.getSsysList();
						break;
					case '2':
						this.getBaseList();
						break;
					case '3':
						this.getProductList();
						break;
				}
				
			},
			tabClick(index) {
				this.curTab = index + ''
			},
			// 康养基地详情
			navigateTo(id) {
				uni.navigateTo({
					url: 'base_detail?id=' + id
				})
			},
			// 中医调理详情
			pageTo (id) {
				uni.navigateTo({
					url: '../product/product_detail?id=' + id
				})
			},
			// 产品详情
			product(id) {
				uni.navigateTo({
					url: '../product/product?id=' + id
				})
			},
			// 膳食养生详情
			ssysDetail (id) {
				uni.navigateTo({
					url: '../product/ssys_detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.banner {
			width: 100%;
			height: 175rpx;
			margin-bottom: 20rpx;
		}
		.content {
			display: flex;
			width: 100%;
		}
		.slidebar {
			width: 170rpx;
			background-color: #fff;
			.slidebar_item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: rgba(0,0,0, 0);
				}
			}
			.active_item {
				position: relative;
				background-color: #f8f8f8;
				font-weight: 700;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 2px;
					height: 100%;
					background-color: #4CD964;
				}
				&::after {
					width: 2px;
					background-color: rgba(0,0,0, .2);
					transition: all 0.3s linear;
				}
			}
		}
		.right_content {
			width: calc(100% - 170rpx);
		}
	}
	.list_content {
		width: 100%;
		padding: 0 20rpx 20rpx;

		.item {
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 25rpx;

			image {
				width: 100%;
				height: 300rpx;
			}

			.item_txt {
				display: flex;
				flex-direction: column;
				padding: 20rpx;

				text {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
				}

				.des {
					color: #888;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
			.nums {
				position: absolute;
				bottom: 140rpx;
				right: 10rpx;
				display: flex;
				background-color: rgba(0,0,0, .5);
				border-radius: 30rpx;
				color: #fff;
				padding: 5rpx 20rpx;
				.u-icon {
					margin-right: 10rpx;
				}
			}
		}
		.items {
			background-color: #fff;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 25rpx;
			padding-bottom: 20rpx;
			image {
				width: 100%;
				height: 300rpx;
				margin-bottom: 20rpx;
				border-radius: 0 0 8rpx 8rpx;
			}
			.title {
				display: block;
				font-size: 34rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
				padding: 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.content {
				display: -webkit-box;
				/* autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */
				-webkit-line-clamp: 2;
				overflow: hidden;
				width: 100%;
				text-align: justify;
				padding: 0 20rpx;
			}
		}
	}
	.nomore {
		padding: 30rpx 0;
	}
</style>
